<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Health America, Insurance!</title>

    <!--Style Scripts-->
	<link rel="stylesheet" type="text/css" href="../CSS/style.css" media="screen" />
	

</head>
 <body>
 
	<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="//code.jquery.com/jquery-1.9.1.js"></script>
	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script>
		$(function() {
		$( "#accordion" ).accordion();
		});
	</script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Amount of Medical Claims by month', 'Routine Medical', 'Specialized Medical', 'Dental', 'Surgeries',
         'ER Visits', { role: 'annotation' } ],
        ['January', 100, 0, 20, 3000, 0, ''],
        ['February', 500, 0, 0, 2000, 0, ''],
        ['March', 300, 0, 0, 0, 0, ''],
		['April', 100, 0, 0, 0, 0, ''],
		['May', 0, 0, 500, 0, 0, ''],
		['June', 1000, 5000, 0, 5000, 15000, ''],
      ]);

	  
      var options = {
		title: 'Medical Claims subdivided per Month (Past 6 months)',
        legend: { position: 'top', maxLines: 3 },
		bar: { groupWidth: '75%' },
		hAxis: {format: '$#,###'},
		isStacked: true,
      };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        
		var formatter = new google.visualization.NumberFormat(
		{prefix: '$', negativeColor: 'red', negativeParens: true});
		formatter.format(data, 1); // Apply formatter to second column
		formatter.format(data, 2);
		formatter.format(data, 3);
		formatter.format(data, 4);
		formatter.format(data, 5);

		
		chart.draw(data, options);
      }

    </script>
	<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Claim Type', 'Amount'],
          ['Routine Medical',	2000],
          ['Specialized Medical', 5000],
          ['Dental',  800],
          ['Surgeries', 10000],
          ['ER Visits', 15000]
        ]);

        var options = {
          title: 'Medical Claims as Percentage of Plan Use (Past 6 months)',
          pieHole: 0.4,
		  slices: {  1: {offset: 0.1},
                     2: {offset: 0.2},
                     3: {offset: 0.3},
                     4: {offset: 0.0},
          },

        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
	<div id="main_container">
		<div class="header">
			<!----------------------------logo code----------------------------->
             <div id="logo"><?php include("../userform/userinfoform.inc"); ?></div>    
    		<!----------------------------logo code----------------------------->
	</div>    
	<div id="chart_div" style="width: 900px; height: 500px;"></div>
	<div id="donutchart" style="width: 900px; height: 500px;"></div>
	
	<div id="accordion">
		<h3>Section 1</h3>
		<div>
			<p>
			Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
			ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
			amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
			odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
			</p>
		</div>
		<h3>Section 2</h3>
		<div>
			<p>
			Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
			purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
			velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
			suscipit faucibus urna.
			</p>
		</div>
	</div>
</body>
</html>